﻿<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="partial/layoutAdmin">
<head>
<title>文章管理</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
	.title-prompt {
		position: absolute;
		right: 0px;
		font-size: 12px;
		top: 10px;
	}
	
	.createPost-container {
		position: relative;
	}
	
	.createPost-main-container {
		padding: 40px 45px 20px 50px;
	}
	
	.postInfo-container {
		position: relative;
		margin-bottom: 10px;
	}
	
	.postInfo-container-item {
		float: left;
	}
	
	.editor-container {
		min-height: 500px;
		margin: 0 0 30px;
	}
	
	.editor-upload-btn-container {
		text-align: right;
		margin-right: 10px;
	}
	
	.editor-upload-btn {
		display: inline-block;
	}
	
	.word-counter {
		width: 40px;
		position: absolute;
		right: -10px;
		top: 0px;
	}
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 270px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 270px;
    height: 178px;
    display: block;
  }
  .el-upload--picture-card {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    margin: 0 8px 8px 0;
    width: 270px;
    height: 148px;
    line-height: 146px;
    vertical-align: top;
}
.el-upload-list--picture-card .el-upload-list__item {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 270px;
    height: 148px;
    margin: 0 8px 8px 0;
    display: inline-block;
}
.el-radio {
    color: #606266;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    outline: 0;
    width: 15%;
}
div#mceu_55 {
    left: 0 !important;
    width: 99% !important;
}

</style>
<link href="https://cdn.bootcss.com/tinymce/4.7.13/plugins/codesample/css/prism.css" rel="stylesheet">
</head>
<body>
	<div layout:fragment="content">
		<div class="createPost-container">
			<el-form class="form-container" :model="submitForm" :rules="rules" ref="submitForm">
			<div class="sub-navbar" :style="{top:stickyTop+'px',zIndex:zIndex,position:position,width:width,height:52+'px',background:'#BDBFBA'}">
				<slot>
					<div>
						<template v-if="fetchSuccess">
						<el-dropdown trigger="click"> 
								<el-button plain>{{submitForm.articleType?'转载':'原创'}} 
									<i class="el-icon-caret-bottom el-icon--right"></i> 
								</el-button> 
								<el-dropdown-menu class="no-padding" slot="dropdown"> 
									<el-dropdown-item> 
										<el-radio-group  v-model="submitForm.articleType" @change="articleTypeChange"> 
											<el-radio :label="0" style="width:60px">原创</el-radio> 
											<el-radio :label="1" style="width:60px">转载</el-radio> 
										</el-radio-group> 
									</el-dropdown-item> 
								</el-dropdown-menu> 
							</el-dropdown>  
							<el-dropdown trigger="click"> 
								<el-button plain>{{submitForm.openComment?'评论已打开':'评论已关闭'}} 
									<i class="el-icon-caret-bottom el-icon--right"></i> 
								</el-button> 
								<el-dropdown-menu class="no-padding" slot="dropdown"> 
									<el-dropdown-item> 
										<el-radio-group  v-model="submitForm.openComment" @change="opencommentChange"> 
											<el-radio :label="0" style="width:60px">关闭</el-radio> 
											<el-radio :label="1" style="width:60px">打开</el-radio> 
										</el-radio-group> 
									</el-dropdown-item> 
								</el-dropdown-menu> 
							</el-dropdown> 
							<el-dropdown trigger="click"> 
								<el-button plain>{{submitForm.isRecommend?'特别推荐':'最新发布'}} 
									<i class="el-icon-caret-bottom el-icon--right"></i> 
								</el-button> 
								<el-dropdown-menu class="no-padding" slot="dropdown"> 
									<el-dropdown-item> 
										<el-radio-group  v-model="submitForm.isRecommend" @change="isRecommendChange"> 
											<el-radio :label="0" style="width:80px">最新发布</el-radio> 
											<el-radio :label="1" style="width:80px">特别推荐</el-radio> 
										</el-radio-group> 
									</el-dropdown-item> 
								</el-dropdown-menu> 
							</el-dropdown> 
							 <el-button v-loading="loading" style="margin-left: 10px;" type="success"
								 @click="submitArticle(1)">发布 </el-button> 
							 <el-button v-loading="loading" type="warning"
								@click="submitArticle(0)" >保存</el-button> 
								<el-button v-loading="loading" type="default"
								@click="returnArticle">返回</el-button> 
						</template>
					</div>
				</slot>
			</div>
			<div class="createPost-main-container">
				<el-row> 
					<el-col :span="19"> 
						<el-card class="box-card">
						 <el-form-item style="margin-bottom: 40px;" prop="title" label-width="45px" label="标题:" >
								 	<el-input type="textarea" class="article-textarea" :rows="1"   placeholder="请输入 标题" v-model="submitForm.title" required  :maxlength="100" clearable> </el-input>
								</el-form-item>
								
								<el-form-item style="margin-bottom: 40px;" label-width="45px" label="摘要:"> 
								    <el-input type="textarea" class="article-textarea" :rows="3" autosize placeholder="请输入内容" v-model="submitForm.abstractContent"> </el-input> 
								    <span class="word-counter" v-show="contentShortLength">{{contentShortLength}}字</span> 
							    </el-form-item>
							<div class="editor-container">
								<template>
									<div class="tinymce-container editor-container">
										<div class="editor-custom-btn-container">
											 <textarea style="min-height:500px" class="tinymce-textarea" id="tinymceId">{{submitForm.content}}</textarea>
										</div>
									</div>
								</template>
							</div>
						</el-card>
					</el-col> 
				<el-col :span="5"> 
					 	<el-card class="box-card" style="margin-left:20px">
							  <div slot="header" class="clearfix">
							       <i class="el-icon-menu"></i><span>发布选项</span>
							  </div>
							  <div class="block">
							    <el-form-item label="分类">
									  <el-select v-model="submitForm.categoryName"  @change="cateCheckChange" filterable placeholder="请选择">
									    <el-option
									      v-for="item in categoryOptions"
									      :key="item.id"
									      :label="item.name"
									      :value="item.id" >
									    </el-option>
									 </el-select>
								 </el-form-item>
								 <el-form-item label="作者">
								  <el-input placeholder="请输入 作者" v-model="submitForm.author" required  :maxlength="100" clearable style="max-width:200px" > </el-input>
								  </el-form-item>
								  <el-form-item label="日期">
								  <el-date-picker v-model="submitForm.publishTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择发布时间" style="max-width:200px"> </el-date-picker>
								  </el-form-item>
							  </div>
						</el-card>
						<el-card class="box-card" style="margin-left:20px">
						 <div slot="header" class="clearfix">
						    <i class="el-icon-edit"></i><span>选择标签</span>
						  </div>
						  <el-autocomplete
						      class="inline-input"
						      v-model="defaultTag"
						      :fetch-suggestions="querySearch"
						       clearable="true"
						      placeholder="请输入内容"
						      @select="selectTag">
						  </el-autocomplete>
						  <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="addTag" >新建 </el-button> 
						  <div style="margin-top:10px">
						  <el-tag
							  v-for="tag in selectedTags"
							  :key="tag.name" style="margin:5px"
							  closable @close="removeTag(tag)"
							  :type="tag.type">
							  {{tag.name}}
							</el-tag>
						  </div>
						</el-card>
						<el-card class="box-card" style="margin-left:20px">
						 <div slot="header" class="clearfix">
						    <i class="el-icon-upload"></i><span>添加封面</span>
						  </div>
						  <div >
							  <el-radio-group v-model="submitForm.showStyle">
								    <el-radio :label="0">无图</el-radio>
								    <el-radio :label="1">单图</el-radio>
								    <el-radio :label="2">多图</el-radio>
								    <el-radio :label="3">大图</el-radio>
							  </el-radio-group>
						  </div>
						   <el-upload
						      :headers="headers"
							  action="/qiniu/upload" multiple
							  :show-file-list="showfileList"
							  :on-success="uploadCoverImage"
							  :before-upload="validCoverImageUpload"
							  :limit="limit"
							  list-type="picture-card"
							  ><!-- :http-request="myupload"   multiple :on-preview="handlePictureCardPreview" :on-remove="handleRemove"-->
							  <i class="el-icon-plus"></i>
							</el-upload>
							<ul class="el-upload-list el-upload-list--picture-card">
								  <li v-for="item in submitForm.coverImageList" class="el-upload-list__item is-success">
									  <img :src="item" alt="" class="el-upload-list__item-thumbnail">
									  <label class="el-upload-list__item-status-label">
									  		<i class="el-icon-upload-success el-icon-check"></i>
									  </label>
									  <i class="el-icon-close" @click="handleRemove"></i>
									  <span class="el-upload-list__item-actions">
									      <span class="el-upload-list__item-preview">
									      	<i class="el-icon-zoom-in"@click="handlePictureCardPreview(item)"></i>
									      </span>
									      <span class="el-upload-list__item-delete">
								  			<i class="el-icon-delete" @click="handleRemove(item)"></i>
									  	  </span>
									  </span>
								</li>
							  </ul>
							<el-dialog :visible.sync="dialogVisible">
							  <img width="100%" :src="dialogImageUrl">
							</el-dialog>
						</el-card>
				</el-col> 
			</div>
			</el-form>

		</div>
	</div>
	<div layout:fragment="jscontent">
	<script th:src="@{/tinymce4.7.5/tinymce.js}" src="https://cdn.bootcss.com/tinymce/4.7.13/jquery.tinymce.min.js"></script>
	<script src="https://cdn.bootcss.com/tinymce/4.7.13/plugins/codesample/plugin.min.js"></script>
	<script th:src="@{/tinymce4.7.5/defaultConfig.js}" ></script>
	
		<script th:inline="javascript" type="text/javascript">
		var initArticleModel=function(){
			var articleModel=[[${articleModel}]];
			if(articleModel!=null){
				this.submitForm.status=articleModel.status;
				this.submitForm.title=articleModel.title;
				this.submitForm.author=articleModel.author;
				this.submitForm.content=articleModel.content;
				this.submitForm.abstractContent=articleModel.abstractContent;
				if(articleModel.coverImageList){
					this.submitForm.coverImageList=articleModel.coverImageList;
				}
				this.submitForm.publishTime=articleModel.publishTime;
				this.submitForm.id=articleModel.id;
				this.submitForm.showStyle=articleModel.showStyle;
				this.submitForm.articleType=articleModel.articleType;
				this.submitForm.categoryId=articleModel.categoryId;
				this.submitForm.categoryName=articleModel.category.categoryName;
				this.submitForm.openComment=articleModel.openComment;
				this.submitForm.articleTags=articleModel.articleTags;
				this.submitForm.isRecommend=articleModel.isRecommend;
				var tagLists=articleModel.articleTags.split(',');
				var tags=[];
				for(var i=0;i<tagLists.length;i++){
					if(tagLists[i]!==""){
						tags.push({ name: tagLists[i], type: '' })
					}
				}
				this.selectedTags=tags;
			}
		}
		var returnArticle=function(){
			window.location.href='/article'
		}
		var submitArticle=function(status){
			var _this=this;
			_this.submitForm.status=status;
			_this.submitForm.editorType=0;
			_this.submitForm.publishTime=moment(_this.submitForm.publishTime).format("YYYY-MM-DD HH:mm:ss")
			_this.submitForm.content=tinymce.get('tinymceId').getContent();
			var param=_this.submitForm;
			$.ajax({
		        data: param,
		        type: "POST",
		        url: '/article/saveArticle',
		        traditional:true, 
		        success: function (result) {
					if(result.code==0){
						_this.$message({
							  showClose: true,
							  duration:0,
							  onClose:function(){
								  _this.returnArticle();
							  },
					          message: result.msg,
					          type: 'success'
					        });
						//_this.returnArticle();
					}else{
						_this.$message.error(result.msg);
					}
		        },
		        error: function (data) {}
		    });
			
		}
		var loadNode=function(node, resolve){
			var _this=this;
			_this.parentId=node==undefined?0:node.id
			$.ajax({
		        data: {parentId:_this.parentId},
		        type: "POST",
		        url: '/getCategorylist',
		        success: function (result) {
					if(result.code==0){
						 resolve(result.data);
						 _this.parentId=0;
					}else{
						_this.$message.error(result.msg);
					}
		        },
		        error: function (data) {}
		    });
		} 
		var loadCategoryOptions=function(){
			var _this=this;
			$.ajax({
		        data: {parentId:0},
		        type: "POST",
		        url: '/getCategorylist',
		        success: function (result) {
					if(result.code==0){
						_this.categoryOptions=result.data;
					}else{
						_this.$message.error(result.msg);
					}
		        },
		        error: function (data) {}
		    });
		} 
		var loadAllTagList=function(){
			var _this=this;
			axios.post('/getTaglist', {parentId:_this.parentId})
			.then(function (response) {
				var result=response.data;
				if(result.code==0){
					_this.tagList=result.data;
				}
			})
			.catch(function (error) {
			 	console.log(error);
			});
			
		}
		var initTinymce=function(){
			const _this = this
			 tinymce.init({  
			    selector: '#tinymceId', 
			    branding: false,
			    elementpath: false,
			    autosave_interval: '20s',
			    table_default_styles: {
			        width: '100%',
			         borderCollapse: 'collapse'
			    },
			    image_title: false, // 是否开启图片标题设置的选择，这里设置否 
			    height: '620',
			    body_class: 'panel-body ',
		        theme: 'modern',
		        forced_root_block: 'p',
		        force_p_newlines: true,
		        importcss_append: true,
			    plugins: plugins,
			    menubar: false,
			    toolbar: toolbar,
		        images_upload_handler:function (blobInfo, success, failure) {
					let formData = new FormData()
        		     // 服务端接收文件的参数名，文件数据，文件名
        		     formData.append('file', blobInfo.blob(), blobInfo.filename())
        		     axios({
        		       method: 'POST',
        		       url: '/qiniu/upload',
        		       data: formData,
        		     })
        		     .then((res) => {
        		    	 var result=res.data.results;
          		         success(result[0].url);
        		     })
        		     .catch(() => {
        		       failure('上传失败')
        		     })
        		 },
        		// CONFIG: ContentStyle 这块很重要， 在最后呈现的页面也要写入这个基本样式保证前后一致， `table`和`img`的问题基本就靠这个来填坑了
        		content_style: content_style,
        		insert_button_items: 'image link | inserttable',
		        end_container_on_empty_block: true,
		        powerpaste_word_import: 'clean',
		        code_dialog_height: 450,
		        code_dialog_width: 1000,
		        advlist_bullet_styles: 'square',
		        advlist_number_styles: 'default',
		        upload_image_url: '/qiniu/upload', //配置的上传图片的路由,//本地:/img/upload
		        default_link_target: '_blank',
		        link_title: false,
		        // CONFIG: Paste
		        paste_retain_style_properties: 'all',
		        paste_word_valid_elements: '*[*]',        // word需要它
		        paste_data_images: true,                  // 粘贴的同时能把内容里的图片自动上传，非常强力的功能
		        paste_convert_word_fake_lists: false,     // 插入word文档需要该属性
		        paste_webkit_styles: 'all',
		        paste_merge_formats: true,
		        nonbreaking_force_tab: false,
		        paste_auto_cleanup_on_paste: false,
		        fontsize_formats: fontsize_formats, // CONFIG: Font
		        style_formats: style_formats,// CONFIG: StyleSelect
		        font_formats: font_formats,// FontSelect
		        tabfocus_elements: ':prev,:next',// Tab
		        object_resizing: true,
		        init_instance_callback: editor => {
		          if (_this.value) {
		            editor.setContent(_this.value)
		          }
		          _this.hasInit = true
		          editor.on('NodeChange Change KeyUp SetContent', () => {
		        	  _this.hasChange = true
		        	  _this.$emit('input', editor.getContent())
		          })
		        },
			     language:'zh_CN'  
			});  
		}
	 var app = new Vue({
         el: '#app',
         data:{
        	 submitForm:{
	  			  status: '0',
	  			  title: '', // 文章题目
	  			  author:'',
	  			  categoryId:0,
	  			  categoryName:'',
	  			  content: '', // 文章内容
	  			  abstractContent: '', // 文章摘要
	  			  coverImageList: [], // 文章图片
	  			  publishTime: undefined, // 前台展示时间
	  			  showStyle:0,
	  			  articleType:0,
	  			  id: 0,
	  			  isRecommend:0,
	  			  openComment: 0,//打开评论
	  			  articleTags: [],
	  			},
	  			treeProps:{
	  				label: 'name',
	  				children:'children',
	  				isLeaf: 'isLeaf'
	  			},
	  		  dialogVisible:false,
	  		  dialogImageUrl:'',
	  		  categoryOptions:[],
	  		  defaultTag:'',
	  		  tagList: [],
	  		  selectedTags:[],
	  		  parentId:0,
	  		  tinymceId:'tinymceId',
      		  active: false,
      		  position: '',
      		  currentTop: '',
      		  stickyTop:0,
      		  zIndex:2,
      		  width: undefined,
      		  height: undefined,
      		  child: null,
      		  stickyHeight: 0,
   			  fetchSuccess: true,
   		      loading: false,
   		      userLIstOptions: [],
   		      rules: {},
   		      hasChange: false,
  	      	  hasInit: false,
  	      	  limit:3,
  	      	  showfileList:false,
  	      	  headers:{}
 
   	    },
   	 watch: {
   	    value(val) {
   	     this.submitForm.content=val;
   	      if (!this.hasChange && this.hasInit) {
   	        this.$nextTick(() => tinymce.get(this.tinymceId).setContent(val))
   	      }
   	    }
   	  },
   	 mounted() {
   		 var token = $("meta[name='_csrf']").attr("content");
 		 var header = $("meta[name='_csrf_header']").attr("content");
		 var str= '{ "'+header+'": "'+token+'"}'; 
		 this.headers = eval('(' + str + ')');
   	     this.height = this.$el.getBoundingClientRect().height;
   	     //console.log(this.height);
   	     window.addEventListener('scroll', this.handleScroll,true);
	   	  this.$nextTick(function () {
	   		this.initTinymce()
	   	  })
	   	 this.loadAllTagList();
   	   },
   	   activated() {
   	     this.handleScroll();
   	     this.initTinymce();

   	   },
   	   destroyed() {
   	     window.removeEventListener('scroll', this.handleScroll);
   	   },
   	computed: {
   	    contentShortLength() {
   	      return this.submitForm.abstractContent.length
   	    }
   	  },
   	  created() {
   		 this.initArticleModel();
   		 this.loadCategoryOptions();
   	  },
 	 methods: {
 		opencommentChange(data){
 			this.submitForm.openComment=data;
 		},
 		articleTypeChange(data){
 			this.submitForm.articleType=data;
 		},
 		isRecommendChange(data){
 			this.submitForm.isRecommend=data;
 		},
 		loadCategoryOptions:loadCategoryOptions,
 		initArticleModel:initArticleModel,
 		submitArticle:submitArticle,
 		initTinymce:initTinymce,
 		destroyTinymce() {
	      if (tinymce.get(this.tinymceId)) {
	    	  tinymce.get(this.tinymceId).destroy()
	      }
	    },
	    setContent(value) {
	    	console.log(value);
	    	tinymce.get(this.tinymceId).setContent(value);
	    
	    },
	    getContent() {
	    	tinymce.get(this.tinymceId).getContent()
	    },
	    imageSuccessCBK(arr) {
	      const _this = this
	      arr.forEach(v => {
	    	  tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
	      })
	    },
 		sticky() {
	      if (this.active) {
	        return
	      }
	      this.position = 'fixed'
	      this.active = true
	      this.width = this.width + 'px'
	    },
	    reset() {
	      if (!this.active) {
	        return
	      }
	      this.position = ''
	      this.width = 'auto'
	      this.active = false
	    },
	    handleScroll() {
	      this.width = this.$el.getBoundingClientRect().width;
	      const offsetTop = this.$el.getBoundingClientRect().top;
	      if (offsetTop <= this.stickyTop) {
	        this.sticky()
	        return
	      }
	      this.reset()
	    },
	    returnArticle:returnArticle,
	    loadNode:loadNode,
	    cateCheckChange(data){
	    	this.submitForm.categoryId=data;
	    },
	    querySearch(queryString, cb) {
	    	//debugger;
	        var tagList = this.tagList;
	        var results = queryString ? tagList.filter(this.createFilter(queryString)) : tagList;
	        // 调用 callback 返回建议列表的数据
	        cb(results);
	      },
	      createFilter(queryString) {
	        return (tag) => {
	          return (tag.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
	        };
	      },
	      loadAllTagList:loadAllTagList,
	      selectTag(item) {
	    	  if (JSON.stringify(this.selectedTags).toLowerCase().indexOf(item.value.trim().toLowerCase())==-1 )  {
	    		  this.selectedTags.push({ name: item.value, type: '' });
	    		  if(this.submitForm.articleTags.length==0){
	    			  this.submitForm.articleTags=item.value;
	    		  }else{
	    			  this.submitForm.articleTags+=","+item.value;
	    		  }
	    		}
	          this.defaultTag='';
	        },
	      removeTag(tag) {
	        	this.selectedTags.splice(this.selectedTags.indexOf(tag), 1);
	        	var tags=[];
				for(var i=0;i<this.selectedTags.length;i++){
					tags.push(this.selectedTags[i].name);
				}
				this.submitForm.articleTags=tags.join(",");
	      },
	      addTag(){
	    	  var value=this.defaultTag.trim();
	    	  if (JSON.stringify(this.selectedTags).toLowerCase().indexOf(value.toLowerCase())==-1 )  {
	    		  this.selectedTags.push({ name: value, type: '' });
	    		  if(this.submitForm.articleTags.length==0){
	    			  this.submitForm.articleTags=value;
	    		  }else{
	    			  this.submitForm.articleTags+=","+value;
	    		  }
	    		  
	    		}
	    	  this.defaultTag='';
	      },
	      myupload(param){
	    	  var form = new FormData();
	    	  // 文件对象
	    	  form.append("file", param.file);
	    	  $.ajax({
			        data: form,
			        type: "POST",
			        url: '/qiniu/upload',
			        processData:false,
			        cache: false,//上传文件无需缓存
                    processData: false,//用于对data参数进行序列化处理 这里必须false
                    contentType: false, //必须
			        success: function (res) {
			        	if(res.success==1){
				    		  for(var i=0;i<res.results.count;i++){
				    			  app.submitForm.coverImageList.push(res.results[i].url);
				    		  }
							}else{
								app.$message.error(res.msg);
							}
			        },
			        error: function (data) {
			        	
			        }
			    });
	    	   
	      },
	      uploadCoverImage(res, file) {
	    	  debugger;
	    	  if(res.success==1){
	    		  for(var i=0;i<res.results.length;i++){
	    			  this.submitForm.coverImageList.push(res.results[i].url); 
	    		  }
				}else{
					this.$message.error(res.msg);
				}
	    	  //this.$refs.upload.clearFiles();  //清空上次文件
	        },
	        validCoverImageUpload(file) {
	        	debugger;
	        	if(this.submitForm.coverImageList&&this.submitForm.coverImageList.length>=3){
	        		this.$message.error('封面图片最多三张!');
	        		return false;
	        	}
	          const isLt2M = file.size / 1024 / 1024 < 2;
	          if (file.type !== 'image/jpeg'&&file.type !== 'image/jpg'&&file.type !== 'image/gif'&&file.type !== 'image/png') {
	            this.$message.error('上传头像图片只能是 JPG 格式!');
	          }
	          if (!isLt2M) {
	            this.$message.error('上传头像图片大小不能超过 2MB!');
	          }
	          return isLt2M;
	        },
	        handleRemove(url) {
	        	this.submitForm.coverImageList.splice(this.submitForm.coverImageList.indexOf(url), 1);
            },
            handlePictureCardPreview(url) {
            	//debugger;
	            this.dialogImageUrl =url ;
	            this.dialogVisible = true;
          }
 	  }});
	 </script>
	</div>
</body>

</html>